미디어 쿼리
✒️ 2025-05-16 11:47 내용 수정
참고 자료 : TCPSchool 미디어 쿼리, TCPSchool css @규칙
서로 다른 매체 유형을 위한 맞춤 스타일을 제공하는 것
- 화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술이다.
- 미디어 쿼리는 html(viewport)의 크기를 기준으로 작동한다.
@media only|not 미디어유형 and (조건식) {
/* 실행 내용 */
}
@media screen and (min-width:320px) and (max-width:720px) {
div{width:100%;}
}
<head>태그 내에서<meta>viewport 설정을 해야 한다.- viewport : html 화면이 보여지는 영역
- pc의 viewport는 크기를 자유롭게 바꿀 수 있으며, pc 해상도 설정에 따라 보여진다.
- 태블릿, 모바일 viewport는 크기가 680px로 정해져 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
content: viewport의 정보를 설정하는 속성width=device-width: width를 장치의 폭과 맞춤initial-scale: 확대 축소 비율
주의 사항
- 연산자 다음 조건식을 작성할 때 한 칸은 꼭 띄어쓰기 해야 한다.
- 숫자의 단위(ex: px)를 반드시 작성해야 한다.
- min 조건은 작은 숫자에서 큰 숫자 순서대로, max 조건은 큰 숫자에서 작은 숫자 순서대로 작성해야 한다.
연산자
| 연산자 | 설명 |
|---|---|
| and | 동일한 조건 추가 |
| , | 동일한 스타일 유형을 사용한 미디어 유형과 조건 추가 |
| only | 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 함 |
| 특정 조건에서만 실행 | |
| not | not이 지정하는 미디어 유형 제외 |
| 조건이 아닌 경우에 내용 실행 |
매체 유형
| 매체 | 설명 |
|---|---|
| all | 모든 장치/매체 |
| 인쇄 장치 | |
| screen | 컴퓨터, 태블릿, 스마트폰 등 스크린이 있는 매체 |
| projection | 프로젝트 장치 |
| speech | 웹 페이지를 읽어주는 스크린 리더 |
| braille | 점자 표시 장치 |
| tv | 영상과 음성이 동시에 출력되는 매체 |
| tty | 디스플레이 기능이 제한된 장치 |
| embossed | 점자 프린터 |
미디어 쿼리 속성
| 속성 | 설명 |
|---|---|
| width | 너비 |
| height | 높이 |
| min-width, max-width | 최소 너비, 최대 너비 |
| min-height, max-height | 최소 높이, 최대 높이 |
| device-width | 매체 화면의 너비 |
| device-height | 매체 화면의 높이 |
| min-device-width, max-device-width | 매체 화면의 최소 너비, 최대 너비 |
| min-device-height, max-device-heigth | 매체 화면의 최소 높이, 최대 높이 |
| device-aspect-ratio | 매체 화면의 비율 |
| orientation | 매체 화면의 방향 |
| color | 매체의 색상 비트 수 |
| color-index | 매체에서 표현 가능한 색상의 개수 |
| monochrome | 흑백 매체에서의 픽셀당 비트 수 |
| resolution | 매체의 해상도 |
미디어 쿼리 적용
- 외부 CSS 파일에 미디어 쿼리 저장
<link rel="stylesheet" media="미디어유형 and|only|not (조건식)" href="CSS파일경로"/>
@import구문 사용
@import url("CSS파일경로") only|not 미디어유형 and|only|not (조건식);
- 웹 문서에 직접 정의
@media only|not 미디어유형 and|only|not (조건식) {
// 실행 내용
}